<template>
  <div :class="isClearStyle ? 'custom-no-style-cascader' : ''">
      <el-cascader v-model="areaCode"
          :props="{ value: 'code', label: 'name', children: 'children', checkStrictly: true }" size="large"
          :options="areaOptions" style="width:100%" @change="change" :disabled="disabled"
          :placeholder="disabled && !value ? '' : '请选择'" ref="cascaderAddr">
      </el-cascader>
  </div>
</template>

<script>
import zoningjs from "china-division/dist/pcas-code.json";

export default {
  name:'areaSelect',
  props: {
      value: {
          type: String, // 根据实际情况定义类型
          required: false,
          default: ''
      },
      disabled: Boolean,
      isClearStyle: {
          type: Boolean,
          default: false
      },
      scope: {
          type: String,
          default: ''
      }
  },
  model: {
      prop: "value",
      event: "input"
  },
  data() {
      return {
          areaOptions: [],
          areaCode: [] // 初始化为数组
      }
  },
  watch: {
      value: {
          handler: function (newVal) {
              this.areaCode = newVal ? newVal.split('/') : [];
          },
          immediate: true,
          deep: true
      }
  },
  created() {
      this.transformData();
      this.$emit('setData',this.areaOptions)
  },
  methods: {
      transformData() {
          var shanxiData = zoningjs.filter(item => item.code == 61);
          this.areaOptions = shanxiData[0].children
          console.log('this.areaOptions',this.areaOptions);
          let scope = this.scope ? this.scope.split('/') : []
          if (scope.length > 0) {
              this.deepArr(this.areaOptions, scope);
          }

      },
      deepArr(ops, scope,flag) {
          if (scope.length == 0&&!flag) {
              return;
          }
          if (scope.length == 0&&ops&&ops.length>0) {
              for (let i = 0; i < ops.length; i++) {
                  ops[i].disabled = flag
                  if (ops[i].children&&ops[i].children.length>0) {
                      ops[i].children = this.deepArr(ops[i].children, [],true)
                  }
              }
          }
          if (scope.length >0&&ops&&ops.length>0) {
              for (let i = 0; i < ops.length; i++) {
              if (ops[i].code != scope[0]) {
                  ops[i].disabled = true

              }
              if (ops[i].children && ops[i].children.length > 0 && scope.length > 1) {
                  ops[i].children = this.deepArr(ops[i].children, scope.slice(1))
              }
              if (ops[i].disabled==true) {
                  ops[i].children = this.deepArr(ops[i].children, [],true)
              }

          }
          }
          return ops
      },
      change() {
        let areaCodeStr = this.areaCode.join('/')
          this.$emit('input', areaCodeStr);
          const regionList = this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels 
          console.log(regionList);
      }
  }
}
</script>

<style>
.custom-no-style-cascader .el-input.is-disabled .el-input__inner {
  border: none;
  background-color: transparent;
  color: unset;
  cursor: unset;
  padding:0;
}

.custom-no-style-cascader .el-input.is-disabled .el-input__icon {
  display: none;
}
</style>